I Hate to Wait!

Remember, even at a "fast" 28.8kbps modem speed, you can only send about 3000 bytes in one second. If you use just one 20KB bitmap on your page it will take 7 seconds to send! It's twice as slow for those poor schmucks with 14.4 modems. Here are some tips for making your HTML fast:

Keep the HTML file small.
The first thing the browser retrieves is the HTML file itself. A browser can get and display a small HTML file quickly, and that means your web-surfing users will be reading something within seconds rather than minutes. Keep it under 6KB if possible.
Avoid large tables at the top of a page.
With plain text, a browser can start to display the text at the top of the file even while it's still reading the bottom of the file. A browser can't start to display a table until it's read the whole table from the web server. If your page starts with a monster 10KB table, it will be at least 3 or 4 seconds before anything shows on the screen.
Keep the graphics small.
Big bitmaps take a long time to load. They also take up a lot of screen space. If you put a big graphic at the top of the page, your web surfers will be "treated" to the sight of this graphic loading in agonizing slow motion. That is, if they bother to wait at all. As with the HTML file, try to keep your graphics under 6KB.
Use the same graphic multiple times.
As soon as the browser retrieves a graphic once, it caches it on the local hard disk so that it can be reused quickly. That means that multiple references to the same graphic are basically free.

Use a HEIGHT and WIDTH on the graphic.

If you specify the exact size of the graphic in the HTML, the browser will know the graphic's size immediately and be able to lay out text around the graphic. If you don't do this, the browser will insert a placeholder and do an initial layout of the text, then come back when it has loaded the graphic and reflow the text. This causes annoying shifts of text after the graphic is retrieved.

BUG WATCH! Wait until after you've created your final graphics before using HEIGHT and WIDTH. If you specify a size and then later change the dimensions of the graphic, the browser will try to stretch or shrink the graphic to fit the size you specified!

Stretch graphics with HEIGHT and WIDTH.
Hey, wasn't this just the bug I mentioned above? Yes, but stretching can be a force used for good, as well as for evil. By stretching a graphic you can make a large graphic that doesn't take a lot of space, and you can make the same graphic serve multiple duties. The graphic at right, for example, is the one above stretched to twice its actual size.

[Go back to Contents page]